<template>
    <div>
        <Row>
            <Card>
                <div class="fitter-panel">
                    <i-input style="width: 260px" placeholder="请输入关键字" v-model="keyword">
                    </i-input>

                    <p>服务类别</p>
                    <i-select placeholder="服务类别" v-model="pid" clearable
                              style="width:240px">
                        <i-option v-for="item in services_menus" :value="item.id" :key="item.id">
                            {{item.name}}
                        </i-option>
                    </i-select>
                    <div style="flex: 1">

                    </div>
                    <i-button @click="loadServices()" type="primary" icon="search" style="margin-left: 16px;">搜索
                    </i-button>
                </div>

                <div class="button-group-panel">
                    <i-button @click="handleAdd" type="info">新增</i-button>
                    <i-button @click="handleStatus(1)" type="success">启用</i-button>
                    <i-button @click="handleStatus(0)" type="warning">禁用</i-button>
                    <i-button @click="handleDeleteSelect" type="error">删除</i-button>
                </div>
                <div class="table-content">
                    <Table @on-selection-change="changeSelection" no-data-text="没有符合条件的服务信息"
                           :loading="loading" border :columns="columns" :data="services"></Table>

                </div>
                <div style="margin: 10px;">
                    <Page @on-page-size-change="changePageSize" :pageSize="size" :current.sync="page"
                          @on-change="changePage" :total="total" show-elevator show-sizer></Page>
                </div>
            </Card>
        </Row>
    </div>
</template>
<script type="text/jsx">
  import axios from 'axios'
  import url from '../../config/url'
  import time from '../../libs/time'
  import utils from '../../libs/util'

  export default {

    name: 'service-list',
    data () {
      return {
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center',
          },
          {
            title: 'ID',
            width: 60,
            align: 'center',
            key: 'id'
          },
          {
            title: '名称',
            width: 120,
            align: 'center',
            key: 'name'
          },
          {
            title: '上级分类',
            width: 160,
            align: 'center',
            key: 'parent_label',
            render: (h, params) => {
              return (
                      <div>
                          <tag type="dot" color="blue">{params.row.parent_label}</tag>
                      </div>
              )
            }
          },
          {
            title: '简介',
            align: 'left',
            key: 'description'
          },
          {
            width: 160,
            title: '预估价格',
            align: 'left',
            key: 'price'
          },
          {
            width: 120,
            title: '首页推荐',
            key: 'show_index',
            render: (h, params) => {
              const self = this

              return (
                      <div>
                          <i-switch size="large" value={params.row.show_index === 1} onInput={(value) => {
                            self.toggleShowIndex(value, params.row.id)
                          }}>
                              <span slot="open">显示</span>
                              <span slot="close">取消</span>
                          </i-switch>
                      </div>
              )
            }
          },
          {
            width: 120,
            title: '状态',
            key: 'status',
            render: (h, params) => {
              const self = this

              return (
                      <div>
                          <i-switch size="large" value={params.row.status === 1} onInput={(value) => {
                            self.toggleStatus(value, params.row.id)
                          }}>
                              <span slot="open">启用</span>
                              <span slot="close">禁用</span>
                          </i-switch>
                      </div>
              )
            }
          },
          {
            title: '操作',
            width: 140,
            key: 'action',
            render: (h, params) => {

              return (
                      <div>
                          <i-button onClick={() => {
                            this.editClick(params.row.id,params.row)
                          }} size="small" type="info">修改
                          </i-button>
                          <poptip transfer={true} onOn-ok={() => {
                            console.log('delete')
                            this.deleteClick(params.row.id)
                          }} confirm title="您确认删除这条内容吗？">
                              <i-button size="small" style="margin-left:10px;"
                                        type="error">删除
                              </i-button>
                          </poptip>

                      </div>
              )
            }
          }
        ],
        loading: false,
        type: 'name',
        visible: false,
        showCreate: false,
        keyword: '',
        created_at: [],
        role_type: '',
        services: [],
        services_menus: [],
        pid: '',
        page: 1,
        size: 10,
        total: 0,
        multipleSelection: [],
      }
    },
    mounted () {
      this.loadServices()
      this.loadMenus()
    },
    methods: {
      editClick (id,item) {
        utils.openNewPage(this, 'service_edit',{service_id: id,item:item})
        this.$router.push({name: 'service_edit', params: {service_id: id,item:item}})
      },
      loadMenus () {
        $api.get(url.service_menus).then((res) => {
          if (res.status) {
            this.services_menus = []
            this.services_menus.push({name: '顶级分类', id: 0})
            this.services_menus = this.services_menus.concat(res.data)
          }
        })
      },
      handleAdd () {
        utils.openNewPage(this, 'service_add')
        this.$router.push('service_add')
      },
      changePage (value) {
        this.loadServices()
      },

      changePageSize (value) {
        this.size = value
        this.loadServices()
      },
      changeSelection (selection) {
        this.multipleSelection = selection
      },
      toggleShowIndex(value, id){
        this.loading = true
        $api.put(`${url.service}/${id}`, {show_index: value ? 1 : 0}).then((res) => {
          this.loading = false
          if (res.status) {
            this.$Message.success('修改成功')
          }
        }).catch((error) => {
          console.log(error)
        })
      },

      handleStatus (status) {
        if (this.multipleSelection.length === 0) {
          this.$Message.error('请选择所选项目')
          return
        } else {
          this.loading = true
          let ids = []
          this.multipleSelection.forEach((item) => {
            ids.push(item.id)
          })
          $api.post(`${url.service}/status`, {status: status, ids: ids}).then((res) => {
            this.loading = false
            this.$Message.success('修改成功')
            this.loadServices()
          }).catch((error) => {
            this.loading = false
            console.log(error)
          })
        }

      },
      handleDeleteSelect () {
        if (this.multipleSelection.length === 0) {
          this.$Message.error('请选择所选项目')
          return
        } else {
          this.$Modal.confirm({
            title: '提示',
            content: '此操作将删除该所选用户, 是否继续?',
            onOk: () => {
              this.loading = true
              let ids = []
//
              this.multipleSelection.forEach((item) => {
                ids.push(item.id)
              })
              $api.post(`${url.service}/delete`, {ids: ids}).then((res) => {
                this.loading = false
                if (res.status) {

                  this.$Message.success('删除成功')
                  this.loadServices()
                }
              }).catch((error) => {
                this.loading = false

              })
            },
            onCancel: () => {
              this.$Message.info('操作已取消')
            }
          })

        }

      },

      deleteClick (id) {
        $api.delete(`${url.service}/${id}`).then((res) => {
          if (res.status) {
            this.$Message.success('删除成功')
            this.loadServices()
          }
        })
      },
      loadServices () {
        this.loading = true
        let params = {page: this.page, size: this.size}
        if (this.keyword) {
          params.keyword = this.keyword
        }
        if (this.pid !== '') {
          params.pid = this.pid
        }
        $api.get(url.service, {
          params: params
        }).then((res) => {
          this.loading = false
          let results = []
          this.page = res.page.current
          this.total = res.page.total
          res.data.forEach((item) => {
            item.parent_label = item.parent ? item.parent.name : '顶级分类'
            results.push(item)
          })
          this.services = results
          console.log(results)
        }).catch((error) => {
          console.log(error)
          this.loading = false
        })
      },
      toggleStatus (value, id) {
        console.log(value, id)
        this.loading = true
        $api.put(`${url.service}/${id}`, {status: value ? 1 : 0}).then((res) => {
          this.loading = false
          if (res.status) {
            this.$Message.success('修改成功')
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    }

  }
</script>
<style lang="less" scoped>
    .fitter-panel {
        background: #f0f0f0;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        p {
            font-size: 12px;
            margin-left: 12px;
            margin-right: 12px;
        }
    }

    .button-group-panel {
        margin-top: 12px;
    }

    .table-content {
        margin-top: 12px;
    }
</style>